<template>
  <el-card>
    <template #header>
      <span class="el-card-title">{{ title || "常用菜单" }}</span>
      <i-ep-close
        v-show="!panelSetIcon"
        class="el-icon-close"
        style="float: right; padding: 3px 0"
        @click="deletePanelItem"
      />
    </template>
    <div style="width: 100%; display: flex; justify-content: center">
      <ul v-if="tableData.length">
        <li
          v-for="(item, index) in tableData"
          :key="index"
          @click="jumpUrl(item.url)"
          :class="getClass_b(index)"
        >
          <div class="card-item">
            <!-- <img :src="item.img ?? pic1" width="26" height="26" /> -->
            <div class="feature-icon" :class="getClass(index)">
              <svg-icon
                v-if="getClass(index) === 'blue1'"
                icon-class="lanchart"
              />
              <svg-icon
                v-if="getClass(index) === 'green1'"
                icon-class="greenchart1"
                style="font-size: 32px"
              />
              <svg-icon
                v-if="getClass(index) === 'purple1'"
                icon-class="purplechart"
                style="font-size: 32px"
              />
            </div>
            <div class="alias_box">
              <span
                v-if="item.permissionName"
                class="alias"
                :class="!item.permissionName.length ? 'mt-[7px]' : ''"
                >{{ item.permissionName }}</span
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import router from "@/router";
// import pic1 from "@/assets/images/screen/caidan.png";
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, params, title } = toRefs(props);

const tableData = ref<any>([]);

const messageRequestEnd = ref(false);
async function getList() {
  // const { data } = await request({
  //   url: `/system/sysfrequentmenu/getOwnList`,
  //   method: "post",
  //   data: {},
  //   params: {
  //     permissionType: 1,
  //   },
  // }).finally(() => {
  //   messageRequestEnd.value = true;
  // });
  // tableData.value = data;
  tableData.value = [
    {
      id: "1",
      permissionName: "故障报修",
      url: "eam/equ/eamRepairOrders",
    },
    {
      id: "2",
      permissionName: "设备监控",
      url: "iot/deviceMonitor",
    },
    {
      id: "3",
      permissionName: "计划检修数据统计",
      url: "eam/equ/deviceManageReport/plan",
    },
    {
      id: "4",
      permissionName: "设备巡检数据统计",
      url: "eam/equ/deviceManageReport/inspect",
    },
    {
      id: "5",
      permissionName: "数据大屏",
      url: "dataScreen/JTDashboard",
    },
    {
      id: "6",
      permissionName: "实时生产数据",
      url: "dataScreen/JTScreen02",
    },
  ];
}

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

function jumpUrl(url: string) {
  if (url?.length) {
    // window.open(url);
    router.push({
      path: "/" + url,
    });
  } else {
    ElMessage("敬请期待~");
  }
}

onMounted(() => {
  getList();
});

function getClass(index) {
  if ((index + 1) % 3 === 1) {
    return "blue1";
  } else if ((index + 1) % 3 === 2) {
    return "green1";
  } else {
    return "purple1";
  }
}

function getClass_b(index) {
  if ((index + 1) % 3 === 1) {
    return "blue_b";
  } else if ((index + 1) % 3 === 2) {
    return "green_b";
  } else {
    return "purple_b";
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
  // background-color: transparent;
  box-shadow: none;
  border: none;
}
.el-card-title {
  font-weight: bold;
  font-size: 15px;
  color: lightslategrey;
}

:deep(.el-card__header) {
  border-bottom: none;
  padding: 10px 15px 0;
}
:deep(.el-card__body) {
  // height: 100%;
  height: calc(100% - 34px) !important;
  padding: 0px 8px !important;
  vertical-align: bottom;
  display: flex;
  justify-content: flex-start;
  overflow-y: auto;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: justify-around;
  // justify-content: left;
  width: 100%;
  .purple_b {
    border: 1px solid #e1d8f7;
  }
  .purple1 {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
  }
  .purple1::before,
  .purple1::after {
    background: rgba(139, 92, 246, 0.1);
  }

  .blue_b {
    border: 1px solid #bcc6ee;
  }
  .blue1 {
    color: #4a6cf7;
    background: rgba(74, 108, 247, 0.1);
  }
  .blue1::before,
  .blue1::after {
    background: rgba(74, 108, 247, 0.1);
  }

  .green_b {
    border: 1px solid #c8f1e4;
  }
  .green1 {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
  }
  .green1::before,
  .green1::after {
    background: rgba(16, 185, 129, 0.1);
  }

  // .purple {
  //   color: #fff;
  //   background: #8b5cf6;
  // }
  // .purple::before,
  // .purple::after {
  //   background: #8b5cf6;
  // }

  // .blue {
  //   color: #fff;
  //   background: #4a6cf7;
  // }
  // .blue::before,
  // .blue::after {
  //   background: #4a6cf7;
  // }
  // .green {
  //   color: #fff;
  //   background: #10b981;
  // }
  // .green::before,
  // .green::after {
  //   background: #10b981;
  // }

  .feature-icon {
    margin-top: 0px;
    font-size: 40px;
    // margin-bottom: 25px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    transition: all 0.3s;
    border-radius: 10px 10px 0 20px;
    position: relative;
    // color: #fff !important;
    // background-color: #4070f4 !important;
  }
  .feature-icon::before,
  .feature-icon::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -20px;
    height: 20px;
    width: 20px;
    // background-color: #4070f4;
  }
  .feature-icon::after {
    border-radius: 0 20px 0 0;
    background-color: #ffffff;
  }
  li {
    width: 100px;
    display: inline-block;
    // width: 33%;
    flex-grow: 1;
    // box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid lightslategrey;
    // box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    background: #fff;
    // margin-right: 10px;
    // margin-top: 10px;
    margin: 8px 5px;
    border-radius: 10px;
    // width: 100%;
    .card-item {
      text-align: center;
      overflow: hidden;
      img {
        // width: 70%;
        max-width: 56px;
        transform: scale(1);
        transition: all 0.4s;
        margin: 10px auto 0px;
      }
      .alias_box {
        // margin-top: 12px;
        padding-top: 15px;
        // height: 40px;
        // width: 100%;
      }
      .alias {
        // color: #99a9bf;
        display: block;
        // margin-bottom: 0px;
        // font-size: 12px;
        font-size: 16px;
        font-weight: 700;
        // margin-bottom: 15px;
        color: #2d3748;
        transform: scale(1);
        transition: all 0.4s;
      }
    }
  }
  li:hover {
    cursor: pointer;
    img {
      transform: scale(1.2);
    }
    .alias {
      font-weight: 600;
      // color: rgb(24, 113, 258);
      transform: scale(1.1);
    }
  }
}
</style>
